{% extends "forum/forum_home.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        #VotingOption div:hover {
            background: #f7f7f7;
        }
        .HistoricalVoting {
            width: 100%;height: 35px;line-height: 35px;padding-left: 3%;cursor: pointer;font-size: 14px;
        }
        .VotingActive {
            background: #cecece;
        }
        #flow_list div:hover {
            background: #f7f7f7;
        }
        .vot_but {
            width: 100px;letter-spacing: 6px;height: 30px;margin-top: 5px;background: #0d8ddb;border: #0d8ddb solid 1px;color: white;border-radius: 1px;text-align: center;
        }
        .VoteTitleActive {
            width: 80%;height: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;vertical-align: top;
        }
        .VoteTitle {
            width: 100%;height: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        #table-detail tr:hover {
            background: #F5F5F5;
        }
    </style>
{% endblock %}
{% block right_content %}
    <div style="width: 100%;height: 100%;font-size: 0;">
        <div style="width: 20%;height: 100%;background: white;display: inline-block;vertical-align: top;">
            <div style="width: 100%;height: 35px;line-height: 35px;background: #2db7f5;color: white;font-size: 14px;">
                &nbsp;&nbsp;&nbsp;历史投票
            </div>
            <div id="flow_list" style="width: 100%;height: 95%;overflow: auto;">
                {% if objs|length %}
                    {% for flow in objs %}
                        {% if flow.flag %}
                            <div onclick="select_flow({{ flow.id }}, this)" class="HistoricalVoting VotingActive" title="{{ flow.vote_title }}">
                                <div class="VoteTitleActive" style="width: 100%;">
                                    {{ flow.vote_title }}
                                </div>
                            </div>
                        {% else %}
                            <div onclick="select_flow({{ flow.id }}, this)" class="HistoricalVoting" title="{{ flow.vote_title }}">
                                <div class="VoteTitle">
                                    {{ flow.vote_title }}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 50%;background: white;color: #cfcfcf;">
                        <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                        <p>暂无数据</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div style="width: 79.7%;height: 100%;background: white;display: inline-block;vertical-align: top;margin-left: 2px;font-size: 14px;">
            {% if flow_obj.vote_title %}
                <div style="width: 70%;height: 150px;line-height: 150px;text-align: center;margin-left: 15%;">
                    <strong id="vote_title" style="font-size: 26px;letter-spacing: 2px;">{{ flow_obj.vote_title }}</strong>
                </div>
                <div style="width: 100%;height: 82%;overflow: auto;">
                    <div style="width: 70%;margin-left: 15%;padding-left: 2%;">
                        <div id="vote_content" style="width: 100%;padding-left: 1%;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ flow_obj.vote_content }}
                        </div>
                        <div id="VotingOption" style="width: 100%;margin-top: 15px;">
                            {% for foo in VotingOption %}
                                <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                    {{ foo.serial }}. {{ foo.option }}
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    <div style="width: 70%;margin-left: 15%;padding-left: 2%;">
                        <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;letter-spacing: 3px;color: #0d8ddb;background: #F5F5F5;">
                            <div style="float: left;">投票统计</div>
                            <div style="float: right;letter-spacing: 1px;padding-right: 2%;">应投票：<span id="vote_id">{{ vote_number }}</span> 人&nbsp;&nbsp;已投票：<span id="voted_id">{{ voted_number }}</span> 人</div>
                        </div>
                        <div style="width: 100%;margin-top: 3px;text-align: center;">
                            <div id="container" style="width: 100%;height: 350px;background: #F5F5F5;display: inline-block;vertical-align: top;">

                            </div>
                        </div>

                        <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;letter-spacing: 3px;color: #0d8ddb;background: #F5F5F5;margin-top: 4px;">
                            投票详情
                        </div>
                        <div style="width: 100%;">
                            <table id="table-detail" style="width: 100%;border-collapse: collapse;"></table>
                        </div>
                    </div>
                </div>
            {% else %}
                <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 20%;background: white;color: #cfcfcf;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                    <p>暂无数据</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("VotingStatistics").className = "add-nav-active";
            var PeopleList = {{ PeopleList | safe }};
            var legend_pie = {{ legend_pie | safe }};
            create_table(PeopleList);left_div('{{ flow_obj.vote_title }}', legend_pie);
        };

        function select_flow(flow_id, objs) {
            var form = new FormData();
            form.append('flow_id', flow_id);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/forum/VotingStatistics.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            document.getElementById("vote_title").innerText = JsonDate["vote_title"];
                            document.getElementById("vote_content").innerHTML = "";
                            document.getElementById("vote_content").innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + JsonDate["vote_content"]
                            document.getElementById("VotingOption").innerHTML = "";

                            var HistoricalList = document.getElementsByClassName("HistoricalVoting");
                            for (var tt=0; tt<HistoricalList.length; tt++) {
                                HistoricalList[tt].className = "HistoricalVoting";
                            }
                            objs.className = "HistoricalVoting VotingActive";

                            for (var i=0; i<JsonDate["VotingOption"].length; i++) {
                                var OptionHtml = `
                                    <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                        `+JsonDate['VotingOption'][i]['serial']+`. `+JsonDate['VotingOption'][i]['option']+`
                                    </div>
                                `
                                $("#VotingOption").append(OptionHtml)
                            }

                            left_div(JsonDate["vote_title"], JsonDate['legend_pie']);

                            document.getElementById("vote_id").innerText = JsonDate['vote_number'];
                            document.getElementById("voted_id").innerText = JsonDate['voted_number'];
                            create_table(JsonDate['PeopleList']);
                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
            };
        }

        function create_table(PeopleList) {
            var table_detail = document.getElementById("table-detail");
            table_detail.innerHTML = "";
            var tr_html = `
                <tr style="width: 100%;">
                    <td style="width: 33%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">投票人</td>
                    <td style="width: 34%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">投票选项</td>
                    <td style="width: 33%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">投票时间</td>
                </tr>
            `
            $("#table-detail").append(tr_html);
            for (var i=0; i<PeopleList.length; i++) {
                var td_html = `
                        <tr style="width: 100%;">
                            <td style="width: 33%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">`+PeopleList[i]["real_name"]+`</td>
                            <td style="width: 34%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">`+PeopleList[i]["option"]+`</td>
                            <td style="width: 33%;height: 35px;border: #F5F5F5 solid 1px;text-align: center;">`+PeopleList[i]["voting_time"]+`</td>
                        </tr>
                    `
                $("#table-detail").append(td_html);
            }
        }

        function left_div(vote_title, legend_pie) {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    {#orient: 'vertical',#}
                    itemGap: 30,
                    left: 'left'
                },
                series: [
                    {
                        name: vote_title,
                        type: 'pie',
                        center: ['50%', "65%"],
                        radius: '50%',
                        data: legend_pie,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }

                ]
            };
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        }
    </script>
{% endblock %}